<template>
  <div class="message_box">
    <div class="message_left" v-if="position == 'left'">
      <a-avatar class="avatar" :size="50">
        <template #icon>
          <img :src="props.faceImg" />
        </template>
      </a-avatar>
      <div class="item">
        <div class="cetName">{{ props.cetName }}</div>
        <div class="message">
          <span>{{ props.message }} </span>
        </div>
      </div>
    </div>
    <div class="message_right" v-if="position == 'right'">
      <div class="item">
        <div class="cetName">{{ props.cetName }}</div>
        <div class="message">
          <span>{{ props.message }} </span>
        </div>
      </div>
      <a-avatar class="avatar" :size="50">
        <template #icon>
          <img :src="props.faceImg" />
        </template>
      </a-avatar>
    </div>

    <div class="message_center" v-if="position == 'center'">
      <span>{{ props.message }} </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  faceImg: string;
  cetName: string;
  message?: string;
  position: "left" | "right" | "center";
}
const props = withDefaults(defineProps<Props>(), {});
</script>
<style scoped lang="scss">
.message_box {
  width: 100%;
  .message_left {
    display: flex;
    .avatar {
      margin: 0 20px 30px 0;
    }
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      .cetName {
        height: 30px;
        display: flex;
        font-weight: 800;
        align-items: center;
        user-select: none;
      }
      .message {
        color: #fff;
        width: 70%;
        span {
          background-color: #271c46;
          padding: 10px;
          display: inline-block;
          line-height: 30px;
          border-radius: 0 25px 25px 25px;
        }
      }
    }
  }
  .message_right {
    display: flex;
    .avatar {
      margin: 0 0 30px 20px;
    }
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .cetName {
        height: 30px;
        display: flex;
        font-weight: 800;
        align-items: center;
        user-select: none;
        text-align: right;
      }
      .message {
        color: #fff;
        width: 70%;
        text-align: right;
        span {
          background-color: #271c46;
          padding: 10px;
          display: inline-block;
          line-height: 30px;
          border-radius: 25px 0 25px 25px;
        }
      }
    }
  }

  .message_center {
    text-align: center;
    font-size: 12px;
    color: #695681;
  }
}
</style>
